<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="upload test">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/resources/css/default.css">
    <link rel="stylesheet" type="text/css" href="/resources/css/fileinput.min.css">
    <style type="text/css">
    body{
      padding-top: 20px;
      padding-bottom: 20px;
    }
    form input{
      margin-bottom: 20px;
      margin-top: 20px;
    }
    </style>
  </head>
  
  <body>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <form method="post" action="/uploadfile" enctype="multipart/form-data">
            <input type="text" name="username">
            <input type="file"  name="attach" id="file-upload" class="file-loading" multiple>
            <div id="errorBlock" class="help-block"></div>
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
          </form>      
        </div>
      </div>
    </div>

    <div class="modal fade" id="modal-id">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body"></div>          
        </div>
      </div>
    </div>
    

    <script src="http://libs.useso.com/js/jquery/2.1.1-rc2/jquery.min.js"></script>
    <script src="/resources/js/fileinput.js" type="text/javascript"></script>
    <script src="/resources/js/fileinput_locale_zh.js" type="text/javascript"></script>
    <script src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $('#file-upload').fileinput({
            'uploadUrl': "/uploadfile",
            'uploadAsync': true,
            'language': "zh",
            'allowedFileTypes': ["image","vedio"],
            'elErrorContainer': '#errorBlock'
          });
          $('#file-upload').on('fileuploaded', function(event, data, previewId, index) {
            $('#modal-id .modal-title').html("上传成功");            
            $('#modal-id .modal-body').html("文件上传成功"+data.response.testdata);
            $('#modal-id').modal('show');
          });
      });
    </script>
  </body>
</html>
